<template>
	<view class="">
		<!-- 雷达 -->
		<view class="" v-show="ShowRadar">
			<view class="radar_title" :style="'padding-top:'+li_top+'px;'">雷达</view>
			<radarComponent @scroll_lower_radar = 'scroll_lower_radar' :data_list="data_list"></radarComponent>
		</view>
		<!-- 私信 -->
		<view class="" v-show="ShowLetter">
			<view class="radar_title" :style="'padding-top:'+li_top+'px;'">私信</view>
			<letterComponent @scroll_lower='scroll_lower'></letterComponent>
		</view>
		<!-- 客户管理 -->
		<view class="" v-show="ShowClient">
			<view class="radar_title" :style="'padding-top:'+li_top+'px;'">客户管理</view>
			<clientComponent @scroll_lower_client='scroll_lower_client' @telFun='telFun'
				@popup_close_event='popup_close_event' :data_list='data_list_client' @update:data_list="updateDataList" @reset_data = 'updata_get_data_list'>
			</clientComponent>
		</view>
		<!-- 我的 -->
		<view class="" v-show="ShowUser">
			<view class="radar_title" :style="'padding-top:'+li_top+'px;'">我的</view>
			<userComponent :admin_token='admin_token' :anavigation='anavigation' :c_static_urls='c_static_urls'
				:user='user' :user_avatar='user_avatar' @goScan='goScan' @preview_event='preview_event'
				@user_avatar_error='user_avatar_error' @clear_cache_envent='clear_cache_envent' :nickname='nickname'></userComponent>
		</view>
		<!-- 切换云店 -->
		<view class="" @click="Onstore">
			<movable-area class="online-service-movable-container"
				:style="'height: calc(100% - '+height_dec_back+'rpx);top:'+backTop+'rpx;'">
				<movable-view class="online-service-event-submit switch" direction="all" :x="backX" :y="backY"
					:animation="false">
					<view class="switch_name">我的</view>
					<view class="switch_name">云店</view>
				</movable-view>
			</movable-area>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="footer_list">
				<view class="footer_item" @click="OnRadar">
					<image
						:src="ShowRadar?'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/74fecc558015455ab5a26ee14f01e827.png':'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/103d1b45c97e479ca1dd821d22f12e63.png'"
						mode="widthFix"></image>
					<view  :class="ShowRadar?'footer_name bl':'footer_name'">雷达</view>
				</view>
				<!-- <view class="footer_item" @click="Onletter">
					<image v-if="ShowLetter"
						src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/aa34894827f24d40873d613ea0f45fa4.png"
						mode="widthFix"></image>
					<image v-else
						src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/cdff5899f68a428b891b5a9c1b580f1f.png"
						mode="widthFix"></image>
					<view v-if="ShowLetter" class="footer_name bl">私信</view>
					<view v-else class="footer_name">私信</view>
				</view> -->
				<view class="footer_item" @click="Onclient">
					<image
						:src="ShowClient?'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/0f4974f635f74b88996a88d9c791bb83.png':'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/96a3106d3cca4fd3995c93d88cb634b5.png'"
						mode="widthFix"></image>
					<view :class="ShowClient?'footer_name bl':'footer_name'">客户</view>
				</view>
				<view class="footer_item" @click="OnbackStage">
					<image
						:src="ShowUser?'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/1a60587775ae45f9a6a489f5413e56ee.png':'https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/63b4bc587b4842a39ccf59cc46f3f817.png'"
						mode="widthFix"></image>
					<view :class="ShowUser?'footer_name bl':'footer_name'">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import radarComponent from '../../component/user_back/radarComponent.vue';
	import letterComponent from '../../component/user_back/letterComponent.vue';
	import clientComponent from '../../component/user_back/clientComponent.vue';
	import userComponent from '../../component/user_back/userComponent.vue';
	var c_static_urls = app.globalData.get_static_urls();
	export default {
		data() {
			return {
				entryTime: 0,
				state: false,
				list_state: true,
				ringList: [],
				cate_id: "",
				startY: 0, // 触摸开始的位置
				data_list_loding_status: 1,
				data_bottom_line_status: false,
				data_list: [],
				data_total: 0,
				data_page_total: 0,
				data_page: 1,
				page: 1,
				hasMoreData: true,
				params: null,
				post_data: {},
				is_show_popup_form: false,
				popup_form_loading_status: false,
				top_search_right_type_status: false,
				li_top: '',
				ShowRadar: true,
				ShowLetter: false,
				ShowClient: false,
				ShowUser: false,
				// 客户管理
				power: 1,
				data_list_client: [],
				data_total_client: 0,
				data_page_total_client: 0,
				data_page_client: 1,
				data_list_loding_status_client: 1,
				data_bottom_line_status_client: false,
				// 我的
				goodsList: [],
				nickname: "用户名",
				user_avatar: "",
				anavigation: [],
				user: {},
				avatar: app.globalData.data.default_user_head_src,
				c_static_urls: c_static_urls,
				admin_token: "",
				phone: "",
				back:'',
				// 切换后台
				system_back: null,
				backX: 0,
				backY: 0,
				backTop: 0,
				height_dec_back: 0,
			}
		},
		// 分享给朋友
		onShareAppMessage(res) {
			if (res.from === 'button') {
				console.log(res.target, "target");
			}
			return {
				title: app.globalData.data.tenantName,
				path: "pages/user_radar/user_radar?numberId=" + app.globalData.data.numberId,
				mpId: app.globalData.data.appid
			}
		},
		onShow() {
			// 记录用户进来时间
			this.entryTime = Date.now();
		},
		onUnload() {
			this.OnEntryTime();
		},
		onLoad(params) {
			this.params = params;
			if (typeof(params) != 'undefined') {
				this.back = params.back || '';
				var numberId = params.numberId || '';
				if (numberId != '') {
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
			this.init();
			const demo = uni.getMenuButtonBoundingClientRect();
			this.li_top = demo.top + demo.height - 25;
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.data_page = 1;
			this.data_bottom_line_status = false;
			this.get_data();
		},
		components: {
			radarComponent,
			letterComponent,
			clientComponent,
			userComponent
		},
		created() {
			var system = app.globalData.get_system_info(null, null, true);
			var width = app.globalData.window_width_handle(system.windowWidth);
			var height = app.globalData.window_height_handle(system);
			// 切换后台
			this.system_back = system;
			this.backX = width - 43;
			this.backY = height - 200;
			this.backTop = 0;
			this.height_dec_back = 0;
		},
		methods: {
			init(e) {
				this.user = app.globalData.get_user_info(this, "init", "");
				if (this.user != false) {
					// 用户未绑定用户则转到登录页面
					if (app.globalData.user_is_need_login(this.user)) {
						uni.navigateTo({
							url: "/pages/login/login?event_callback=init"
						})
					} else {
						if(this.back == 'OnbackStage'){
							this.OnbackStage();
						}
						this.get_data();
						this.get_data_list(1);
						this.get_user_data();
					}
				}
			},
			// 雷达数据
			get_data() {
				// 分页是否还有数据
				if (this.data_bottom_line_status == true) {
					uni.stopPullDownRefresh();
					return false;
				};
				// 获取数据
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				var post_data = {
					page: this.data_page
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog"),
					method: "POST",
					data: post_data,
					success: (res) => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.data.data.code == 200) {
							var data = res.data.data;
							if (this.data_page <= 1) {
								var temp_data_list = data.rows;
							} else {
								var temp_data_list = this.data_list || [];
								var temp_data = data.rows;
								for (var i in temp_data) {
									temp_data_list.push(temp_data[i]);
								}
							}
							this.data_list = temp_data_list;
							this.data_page = this.data_page + 1;
							this.page_total = data.page_total;
							if (this.data_page > 1 && this.data_page > this.page_total) {
								this.data_bottom_line_status = true
							}
						}
					}
				})
			},
			// 更新父组件页面数据
			updateDataList(newData) {
				this.data_list_client = newData;
			},
			// 清除搜索更新页面数据
			updata_get_data_list(){
				this.data_list_client = [];
				this.get_data_list(1)
			},
			// 客户管理获取数据
			get_data_list(is_mandatory) {
				// 分页是否还有数据
				if ((is_mandatory || 0) == 0) {
					if (this.data_bottom_line_status_client == true) {
						// uni.stopPullDownRefresh();
						return false;
					}
				}
				// 加载loding
				uni.showLoading({
					title: '加载中...'
				});
				this.data_list_loding_status_client = 1;
				let url = app.globalData.get_request_url("manager/index");
				// 获取数据
				uni.request({
					url: url,
					method: 'POST',
					data: {
						page: this.data_page_client
					},
					header: {
						'Authorization': 'Bearer ' + app.globalData.data.admin_token
					},
					dataType: 'json',
					success: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.data.code == 200) {
							var data = res.data.data;
							this.power = data.power;
							if (data.data.rows.length > 0) {
								if (this.data_page_client <= 1) {
									var temp_data_list = data.data.rows;
								} else {
									var temp_data_list = this.data_list_client || [];
									var temp_data = data.data.rows;
									for (var i in temp_data) {
										temp_data_list.push(temp_data[i]);
									}
								}
								this.data_list_client = temp_data_list;
								this.data_total_client = data.data.total;
								this.data_page_total_client = data.data.page_total;
								this.data_list_loding_status_client = 3;
								this.data_page_client = this.data_page_client + 1;
								if (this.data_page_client > 1 && this.data_page_client > this.data_page_total_client) {
									this.data_bottom_line_status_client = true;
								}
							} else {
								this.data_list_loding_status_client = 0;
							}
						} else {
							this.data_list_loding_status_client = 0;

							if (app.globalData.is_login_check(res.data, this, 'get_data_list')) {
								uni.showToast({
									title: res.data.msg
								})

							}
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.stopPullDownRefresh();

						this.data_list_loding_status_client = 2
						uni.showToast({
							title: '服务器请求出错'
						})
					}
				});
			},
			// 拨打电话
			telFun(event) {
				var phone = event.currentTarget.dataset.tel || null;
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: phone,
						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [phone, '呼叫'],
						success: function(res) {
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: phone,
								})
							}
						}
					})
				}
			},
			// 分享
			popup_close_event(event) {
				// console.log(e, "11111111111");
			},
			// 我的页面数据
			get_user_data() {
				var url = app.globalData.get_request_url("center");
				uni.request({
					url: url,
					method: 'POST',
					data: {},
					dataType: 'json',
					header: {
						'Authorization': 'Bearer ' + app.globalData.data.admin_token
					},
					success: (res) => {
						if (res.data.code == 200) {
							var data = res.data.data;
							this.nickname = data.nickname;
							this.user_avatar = data.avatar;
							if (this.user_avatar == '/default-user-avatar.gif') {
								this.user_avatar = app.globalData.data.default_user_head_src;
							}
							this.admin_token = data.token;
							app.globalData.data.admin_token = data.token;
							this.anavigation = data.anavigation
						} else {
							if (app.globalData.is_login_check(res.data, this, 'get_data')) {
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									duration: 3000
								});
							}
						}
					}
				})
			},
			// 跳转名片
			goScan() {
				uni.navigateTo({
					url: "/pages/user_card/user_card"
				})
			},
			// 头像查看
			preview_event() {
				if (app.globalData.data.default_user_head_src != this.avatar) {
					uni.previewImage({
						current: this.avatar,
						urls: [this.avatar]
					});
				}
			},
			// 头像加载错误
			user_avatar_error(e) {
				this.avatar = app.globalData.data.default_user_head_src
			},
			// 清除缓存
			clear_cache_envent() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要清除缓存吗?',
					cancelText: "取消",
					confirmText: "确定",
					success: (result) => {
						if (result.confirm) {
							uni.showLoading({
								title: '清除中...'
							});
							setTimeout(function() {
								uni.clearStorageSync();
								uni.showToast({
									title: "清除成功"
								});
								uni.switchTab({
									url: "/pages/index/index"
								});
							}, 3000);
						}
					}
				})
			},
			OnEntryTime() {
				var radarlog_data = {
					pageUrl: "pages/user_radar/user_radar",
					name: "雷达页",
					remark: "雷达页停留时间",
					entryTime: this.entryTime,
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog/add"),
					data: radarlog_data,
					method: "POST",
					success: (res) => {
						console.log(res, "雷达页停留时间");
					}
				})
			},

			// 滚动加载
			// scroll_lower_touchend(e) {
			// 	this.data_page = 1;
			// 	this.get_data();
			// },
			scroll_lower_radar(){
				this.get_data();
			},
			// 私信滚动加载
			scroll_lower(e) {
				// console.log(e, "e");
			},
			// 客户滚动加载
			scroll_lower_client(e) {
				this.get_data_list(0);
			},
			OnRadar() {
				this.ShowRadar = true;
				this.ShowLetter = false;
				this.ShowClient = false;
				this.ShowUser = false;
			},
			// 跳转私信页面
			Onletter() {
				this.ShowRadar = false;
				this.ShowLetter = true;
				this.ShowClient = false;
				this.ShowUser = false;
			},
			// 跳转客户管理
			Onclient() {
				this.ShowRadar = false;
				this.ShowLetter = false;
				this.ShowClient = true;
				this.ShowUser = false;
			},
			// 跳转我的页面
			OnbackStage() {
				this.ShowRadar = false;
				this.ShowLetter = false;
				this.ShowClient = false;
				this.ShowUser = true;
			},
			// 跳转我的云店
			Onstore() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			startDrag(event) {
				event.preventDefault(); 
				this.isDragging = true;
				this.startX = event.touches[0].clientX;
				this.startY = event.touches[0].clientY;
			},
			onDrag(event) {
				if (!this.isDragging) return;
				const deltaX = event.touches[0].clientX - this.startX;
				const deltaY = event.touches[0].clientY - this.startY;
				this.posX -= deltaX;
				this.posY -= deltaY;
				this.startX = event.touches[0].clientX;
				this.startY = event.touches[0].clientY;
			},
			endDrag() {
				this.dragging = false;
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f2f2f2;
	}

	.radar_title {
		text-align: center;
		margin-bottom: 20rpx;
	}



	.bottom_line {
		text-align: center;
	}

	/* 切换云店 */
	.switch {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.2);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 1000;

		.switch_name {
			color: white;
			font-size: 12px;
		}
	}
	.online-service-movable-container {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: transparent;
		pointer-events: none;
		z-index: 2;
	}
	
	.online-service-event-submit {
		pointer-events: auto;
	}

	// 底部
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: white;

		.footer_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

			.footer_item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.footer_name {
					color: #707070;
					font-size: 12px;
				}

				.bl {
					color: #1296db;
				}

				image {
					width: 40rpx;
				}
			}
		}
	}
</style>